{% extends 'base/base1.html' %}
{% load static %}

{% block title %}订单管理{% endblock %}

{% block css %}
<style>
    .order-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 20px;
        padding: 20px;
    }
    
    .status-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: bold;
    }
    
    .status-pending { background: #fff3cd; color: #856404; }
    .status-paid { background: #d4edda; color: #155724; }
    .status-shipped { background: #cce5ff; color: #004085; }
    .status-delivered { background: #d1ecf1; color: #0c5460; }
    .status-cancelled { background: #f8d7da; color: #721c24; }
    .status-refunded { background: #e2e3e5; color: #383d41; }
    
    .filter-section {
        background: white;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
</style>
{% endblock %}

{% block main %}
<div class="container-fluid">
    <h2>订单管理</h2>
    
    <!-- 筛选和添加区域 -->
    <div class="filter-section">
        <div class="d-flex justify-content-between align-items-center">
            <form method="get" class="form-inline">
                <div class="form-group">
                    <label for="status">订单状态：</label>
                    <select name="status" id="status" class="form-control" onchange="this.form.submit()">
                        <option value="">全部状态</option>
                        {% for status_code, status_name in status_choices %}
                            <option value="{{ status_code }}" {% if current_status == status_code %}selected{% endif %}>
                                {{ status_name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </form>
            <a href="{% url 'main:order_create' %}" class="btn btn-primary">添加订单</a>
        </div>
    </div>
    
    <!-- 订单列表 -->
    {% for order in orders %}
    <div class="order-card">
        <div class="row">
            <div class="col-md-8">
                <h4>订单号：{{ order.order_number }}</h4>
                <p><strong>用户：</strong>{{ order.user.username }}</p>
                <p><strong>商品：</strong>{{ order.product.name }}</p>
                <p><strong>收货地址：</strong>{{ order.shipping_address.get_full_address }}</p>
                <p><strong>订单金额：</strong><span class="text-primary font-weight-bold">￥{{ order.total_amount }}</span> <small class="text-muted">(￥{{ order.price }} x {{ order.quantity }})</small></p>
                <p><strong>创建时间：</strong>{{ order.created_at|date:"Y-m-d H:i" }}</p>
            </div>
            <div class="col-md-4 text-right">
                <span class="status-badge status-{{ order.status }}">
                    {{ order.get_status_display }}
                </span>
                <div class="mt-3">
                    <a href="{% url 'main:order_detail' order.pk %}" class="btn btn-info btn-sm">查看</a>
                    <a href="{% url 'main:order_update' order.pk %}" class="btn btn-warning btn-sm">编辑</a>
                    <a href="{% url 'main:order_delete' order.pk %}" class="btn btn-danger btn-sm">删除</a>
                </div>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="text-center">
        <h4>暂无订单数据</h4>
    </div>
    {% endfor %}
    
    <!-- 分页 -->
    {% if page_obj.has_other_pages %}
    <nav>
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if current_status %}&status={{ current_status }}{% endif %}">上一页</a>
                </li>
            {% endif %}
            
            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <li class="page-item active">
                        <span class="page-link">{{ num }}</span>
                    </li>
                {% else %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ num }}{% if current_status %}&status={{ current_status }}{% endif %}">{{ num }}</a>
                    </li>
                {% endif %}
            {% endfor %}
            
            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if current_status %}&status={{ current_status }}{% endif %}">下一页</a>
                </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock %}